<template>
  <view class="device-container">
    <view class="header">
      <text class="title">设备控制</text>
      <text class="subtitle">教室设备远程控制</text>
    </view>

    <view class="classroom-selector">
      <text class="label">选择教室</text>
      <picker @change="onClassroomChange" :value="classroomIndex" :range="classrooms" range-key="name">
        <view class="picker-value">{{ classrooms[classroomIndex]?.name || '请选择教室' }}</view>
      </picker>
    </view>

    <view class="device-list" v-if="selectedClassroom">
      <view class="section-title">设备列表</view>
      <view class="devices">
        <view v-for="device in devices" :key="device.id" class="device-card">
          <view class="device-info">
            <text class="device-name">{{ device.name }}</text>
            <text class="device-status" :class="device.status">{{ device.status ? '开启' : '关闭' }}</text>
          </view>
          <view class="device-actions">
            <switch :checked="device.status" @change="onDeviceSwitch(device, $event)" color="#667eea" />
          </view>
        </view>
      </view>

      <view class="batch-controls">
        <text class="section-title">批量控制</text>
        <view class="batch-buttons">
          <button class="btn secondary" @click="controlAllDevices(false)">关闭所有设备</button>
          <button class="btn primary" @click="controlAllDevices(true)">开启所有设备</button>
        </view>
      </view>
    </view>

    <view v-else class="empty-state">
      <text>请先选择教室</text>
    </view>

    <!-- 设备状态统计 -->
    <view class="stats-card" v-if="selectedClassroom">
      <text class="stats-title">设备状态统计</text>
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-value">{{ getDeviceCountByStatus(true) }}</text>
          <text class="stat-label">开启</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ getDeviceCountByStatus(false) }}</text>
          <text class="stat-label">关闭</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ devices.length }}</text>
          <text class="stat-label">总数</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { api } from '@/utils/request.js'

export default {
  data() {
    return {
      classroomIndex: 0,
      classrooms: [],
      devices: [],
      selectedClassroom: null
    }
  },
  
  onLoad() {
    this.loadClassrooms()
  },
  
  methods: {
    async loadClassrooms() {
      try {
        const res = await api.getClassrooms()
        if (res.code === 200) {
          this.classrooms = res.data
          if (this.classrooms.length > 0) {
            this.selectedClassroom = this.classrooms[0]
            this.loadDevices(this.selectedClassroom.id)
          }
        }
      } catch (error) {
        console.error('加载教室列表失败:', error)
      }
    },
    
    async loadDevices(classroomId) {
      try {
        // 模拟设备数据 - 实际应该调用API
        this.devices = [
          { id: 1, name: '投影仪', status: false, type: 'display' },
          { id: 2, name: '空调', status: true, type: 'climate' },
          { id: 3, name: '主灯光', status: false, type: 'lighting' },
          { id: 4, name: '辅助灯光', status: true, type: 'lighting' },
          { id: 5, name: '音响系统', status: false, type: 'audio' },
          { id: 6, name: '电子白板', status: true, type: 'display' },
          { id: 7, name: '窗帘', status: false, type: 'window' },
          { id: 8, name: '电源插座', status: true, type: 'power' }
        ]
      } catch (error) {
        console.error('加载设备失败:', error)
      }
    },
    
    onClassroomChange(e) {
      this.classroomIndex = e.detail.value
      this.selectedClassroom = this.classrooms[this.classroomIndex]
      this.loadDevices(this.selectedClassroom.id)
    },
    
    async onDeviceSwitch(device, e) {
      const newStatus = e.detail.value
      
      try {
        // 模拟调用设备控制API
        // await api.updateDeviceStatus({ deviceId: device.id, status: newStatus })
        
        // 更新本地状态
        device.status = newStatus
        uni.showToast({ 
          title: `${device.name}已${newStatus ? '开启' : '关闭'}`, 
          icon: 'success' 
        })
      } catch (error) {
        console.error('设备控制失败:', error)
        uni.showToast({ title: '操作失败', icon: 'none' })
      }
    },
    
    async controlAllDevices(status) {
      try {
        // 批量更新所有设备状态
        this.devices.forEach(device => {
          device.status = status
        })
        
        uni.showToast({ 
          title: `已${status ? '开启' : '关闭'}所有设备`, 
          icon: 'success' 
        })
      } catch (error) {
        console.error('批量控制失败:', error)
        uni.showToast({ title: '操作失败', icon: 'none' })
      }
    },
    
    getDeviceCountByStatus(status) {
      return this.devices.filter(device => device.status === status).length
    }
  }
}
</script>

<style scoped>
.device-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 30rpx;
}

.header {
  margin-bottom: 40rpx;
}

.title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 24rpx;
  color: #666;
}

.classroom-selector {
  background: white;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.picker-value {
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  text-align: center;
}

.device-list {
  background: white;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.devices {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.device-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 10rpx;
  border-left: 6rpx solid #667eea;
}

.device-info {
  flex: 1;
}

.device-name {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.device-status {
  font-size: 24rpx;
  padding: 6rpx 12rpx;
  border-radius: 15rpx;
  background: #e8f5e8;
  color: #4caf50;
}

.device-status.false {
  background: #ffebee;
  color: #f44336;
}

.batch-controls {
  border-top: 1rpx solid #eee;
  padding-top: 30rpx;
}

.batch-buttons {
  display: flex;
  gap: 20rpx;
}

.btn {
  flex: 1;
  border: none;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 24rpx;
}

.primary {
  background: #667eea;
  color: white;
}

.secondary {
  background: #f5f5f5;
  color: #666;
}

.empty-state {
  text-align: center;
  padding: 100rpx;
  color: #999;
  background: white;
  border-radius: 15rpx;
}

.stats-card {
  background: white;
  border-radius: 15rpx;
  padding: 30rpx;
}

.stats-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  text-align: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.stat-item {
  text-align: center;
  padding: 30rpx 20rpx;
  background: #f8f9fa;
  border-radius: 10rpx;
}

.stat-value {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}
</style>